<template>
  <div class="detail">
    <MHeader :back="true">详情</MHeader>
    <ul>
      <li>
        <label for="bookname">书名</label>
        <input type="text" v-model="book.bookName" id="bookname">
      </li>
      <li>
        <label for="bookinfo">信息</label>
        <input type="text" v-model="book.bookInfo" id="bookinfo">
      </li>
      <li>
        <label for="bookPrice">价格</label>
        <input type="text" v-model.number="book.bookPrice" id="bookPrice">
      </li>
      <li>
        <button @click="update">确认修改</button>
      </li>
    </ul>

  </div>
</template>

<script>
  import MHeader from '../base/MHeader'
  import {findOneBook,updateBook} from '../api'

  export default {
    created() {
      this.getData();
    },
    watch: {
      $route() {  //只要路径变换，重新获取数据
        this.getData();
      }
    },
    data() {
      return {book: {}}
    },
    methods: {
      async getData() {
        // 给data起别名 对象中属性名字必须和得到的结果名字一致
        this.book = await findOneBook(this.bid);
        //如果是空对象 需要调整会列表页
        Object.keys(this.book).length > 0 ? void 0 : this.$router.push("/list")
      },
      async update(){ // 点击修改图书信息
        await updateBook(this.bid,this.book);
        this.$router.push('/list'); // 修改完成后跳转页面
      }
    },
    computed: {
      bid() {
        return this.$route.params.bid;  //将路径参数的id 映射到bid上
      }
    },
    components: {
      MHeader
    }
  }
</script>

<style scoped lang="less">
  .detail {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 100;
  }

  ul {
    margin:50px 10px 0 10px;
    li{
      label{
        display: block;
        font-size: 25px;
      }
      input{
        height: 25px;
        width: 100%;
        margin: 10px 0;
      }
      button{
        display: block;
        width: 60px;
        height: 25px;
        background: #67d6ff;
        color: #fff;
        border: none;
        border-radius: 4px;
        outline: none;
      }
    }
  }

</style>
